import { Meta, Story, Canvas, Props } from "@storybook/addon-docs";
import { withKnobs } from "@storybook/addon-knobs";
import { action } from '@storybook/addon-actions';
import { ViewPort, Custom } from "../../";
import { AnchorType } from "../../../core-types";
import { green, description } from "../Utils";
import { CommonHeader, PropsTable, PropsHeader, Prop, StandardProps } from "../Utils";

<CommonHeader />

<Meta title="Components/Custom" component={Custom} />

## Custom

A space that can be any other type of space given it's properties. You should use this space if you
intend to change the type of the space dynamically without causing remounting of child components.

### As a fill space

<Canvas>
	<Story name="Fill">
		<ViewPort>
			<Custom style={green}>{description("Custom fill")}</Custom>
		</ViewPort>
	</Story>
</Canvas>

### As a positioned space

<Canvas>
	<Story name="Positioned">
		<ViewPort>
			<Custom style={green} left={200} top={200} width={300} height={300} isPositioned={true}>
				{description("Custom positioned")}
			</Custom>
		</ViewPort>
	</Story>
</Canvas>

### As a left anchored space

<Canvas>
	<Story name="Anchored left">
		<ViewPort>
			<Custom style={green} anchor={AnchorType.Left} anchorSize={200}>
				{description("Custom anchored left")}
			</Custom>
		</ViewPort>
	</Story>
</Canvas>

### As a top anchored space

<Canvas>
	<Story name="Anchored top">
		<ViewPort>
			<Custom style={green} anchor={AnchorType.Top} anchorSize={200}>
				{description("Custom anchored top")}
			</Custom>
		</ViewPort>
	</Story>
</Canvas>

### As a right anchored space

<Canvas>
	<Story name="Anchored right">
		<ViewPort>
			<Custom style={green} anchor={AnchorType.Right} anchorSize={200}>
				{description("Custom anchored right")}
			</Custom>
		</ViewPort>
	</Story>
</Canvas>

### As a bottom anchored space

<Canvas>
	<Story name="Anchored bottom">
		<ViewPort>
			<Custom style={green} anchor={AnchorType.Bottom} anchorSize={200}>
				{description("Custom anchored bottom")}
			</Custom>
		</ViewPort>
	</Story>
</Canvas>

### As a left resizable space

<Canvas>
	<Story name="Resizable left">
		<ViewPort>
			<Custom style={green} anchor={AnchorType.Left} anchorSize={200} resizable={true} trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
				{description("Custom resizable left")}
			</Custom>
		</ViewPort>
	</Story>
</Canvas>

### As a top resizable space

<Canvas>
	<Story name="Resizable top">
		<ViewPort>
			<Custom style={green} anchor={AnchorType.Top} anchorSize={200} resizable={true} trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
				{description("Custom resizable top")}
			</Custom>
		</ViewPort>
	</Story>
</Canvas>

### As a right resizable space

<Canvas>
	<Story name="Resizable right">
		<ViewPort>
			<Custom style={green} anchor={AnchorType.Right} anchorSize={200} resizable={true} trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
				{description("Custom resizable right")}
			</Custom>
		</ViewPort>
	</Story>
</Canvas>

### As a bottom resizable space

<Canvas>
	<Story name="Resizable bottom">
		<ViewPort>
			<Custom style={green} anchor={AnchorType.Bottom} anchorSize={200} resizable={true} trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
				{description("Custom resizable bottom")}
			</Custom>
		</ViewPort>
	</Story>
</Canvas>

### Properties

<Story name="Properties">
	<PropsTable>
		<PropsHeader>Relevant as positioned</PropsHeader>
		<Prop name="isPositioned" type="boolean" default="false" description="Position space based on bottom, left, right, top, width and height properties." />
		<Prop name="bottom" type="number | string" description="Bottom offset from viewport edge." />
		<Prop name="left" type="number | string" description="Left offset from viewport edge." />
		<Prop name="right" type="number | string" description="Right offset from viewport edge." />
		<Prop name="top" type="number | string" description="Top offset from viewport edge." />
		<Prop name="width" type="number | string" description="Width of space." />
		<Prop name="height" type="number | string" description="Height of space." />
		<PropsHeader>Relevant as anchored</PropsHeader>
		<Prop name="anchor" type="AnchorType.Left, AnchorType.Top, AnchorType.Right, AnchorType.Bottom, 'anchor-left', 'anchor-top', 'anchor-right', 'anchor-bottom'" description="Anchor the space to the parents edge" />
		<Prop name="anchorSize" type="number | string" description="Size of space when anchored." />
		<PropsHeader>Relevant as resizable</PropsHeader>
		<Prop name="resizable" type="boolean" default="false" description="Makes the space resizable." />
		<Prop name="handleSize" type="number" default="5" description="Size of the resize handle in pixels." />
		<Prop
			name="overlayHandle"
			type="boolean"
			default="true"
			description="Determines method of placement of the resize handle. By default the handle is placed over the space. When set to false, the space resize handle sits next to the space reducing the size of the space."
		/>
		<Prop name="minimumSize" type="number" description="Constrains resizing of the space to a minimum size." />
		<Prop name="maximumSize" type="number" description="Constrains resizing of the space to a maximum size." />
		<Prop
			name="onResizeStart"
			type="() => boolean"
			description="Triggered when a resize starts. Returning false from the event handler cancels the resize."
		/>
		<Prop
			name="onResizeEnd"
			type="(newSize: number) => void"
			description="Triggered when a resize ends. The final size in pixels of the space in after the resize is passed as the first parameter."
		/>
		<StandardProps />
	</PropsTable>
</Story>